<template>
	<view class="update-pwd-page">
		<view class="tip">
			密码长度6-24位，可以是数字字母任意字符
		</view>
		<form @submit="formSubmit" >
			<view class="uni-form-item uni-column" v-for="(item,index) in inputArr" :key="index">
				<view class="input-con c-flex c-flex-row c-item-center">
					<input class="uni-input" :password="item.isHidePwd" :name="item.name"  :placeholder="item.placeholder" />
					<image v-if="item.isHidePwd" class="eye-close" src="../../../static/images/login/login-icon-eye.png" @click="onChange(item,false)"></image>
					<image v-if="!item.isHidePwd" class="eye-open" src="../../../static/images/login/login-icon-eye-open.png" @click="onChange(item,true)"></image>
				</view>
			</view> 
			<button class="submit-bt" form-type="submit">保存</button>
		</form>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputArr:[
					{value:'',name:'password',placeholder:'请输入旧密码',isHidePwd:true},
					{value:'',name:'newPassword',placeholder:'请输入6-24位新密码',isHidePwd:true},
					{value:'',name:'newPassword1',placeholder:'请输入6-24位新密码',isHidePwd:true}
				]
			};
		},
		methods:{
			onChange(item,bl){
				item.isHidePwd = bl;
			},
			formSubmit(e){
				const pwd = e.detail.value.password;
				const newPwd = e.detail.value.newPassword;
				const newPwd1 = e.detail.value.newPassword1;
				if(pwd == ''){
					uni.showToast({
						icon:'error',
						title:'旧密码不能为空！'
					});
					return;
				}
				if(newPwd == '' ||newPwd1 == ''){
					uni.showToast({
						icon:'error',
						title:'新密码不能为空'
					})
					return;
				}
				if(newPwd != newPwd1){
					uni.showToast({
						icon:'error',
						title:'新密码不一致！'
					})
					return;
				}
				uni.showLoading({title:'修改中...'});
				this.$API.updatePwd({'newPassword': newPwd,'password': pwd}).then(res =>{
					uni.hideLoading();
					uni.showToast({
						title:'修改成功！'
					});
					// 记录token
					uni.redirectTo({
						url:'/pages/login/login'
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.update-pwd-page{
	background: #ffffff;padding:20rpx;height:100vh;
	.tip{color: #bfbcbc;text-align: center;}
	.input-con{
		position: relative;
		height: 98rpx;margin-top: 56rpx;background: #F7F8FA;border-radius: 48rpx;padding: 0 40rpx;
		input{height: 98rpx;flex:1;}
		.eye-close,.eye-open{width: 44rpx;height: 44rpx;right: 40rpx;top: 28rpx;}
	}
	.submit-bt{
		height: 98rpx;line-height: 98rpx;border-radius: 48rpx;background: #2986FF;
		font-size: 30rpx;font-weight: bold;color: #FFFFFF;margin-top: 86rpx; margin-left: 0;border: 1rpx solid #FFFFFF;
	}
}
</style>
